<template>
<img :src="codeUrl" alt="" @click="clickCanvas" :style="style">
</template>
<script>
export default {
  name: 'VerifyCode',
  props: {
    width: {
      required: true
    },
    height: {
      required: true
    }
  },
  data: () => {
    return {
      codeUrl: '',
      clientId: `${Math.ceil(Math.random() * 100000)}${Date.now()}`
    }
  },
  computed: {
    style () {
      return `width=${this.width}px, height=${this.height}px;`
    }
  },
  methods: {
    async getCodeUrl () {
      const res = await this.$store.dispatch('GET_VERIFY_CODE', {
        clientId: this.clientId,
        width: 120,
        height: 50
      })
      if (res.code === 100) {
        this.codeUrl = res.result
        this.$emit('checkFn', {
          clientId: this.clientId
        })
      }
    },
    clickCanvas () {
      this.getCodeUrl()
    }
  },
  mounted () {
    this.getCodeUrl()
  }
}
</script>
